<template>
  <swiper
  :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
  }"
  :pagination="{ clickable: true }"
  :autoplay="{ 
    delay:2500,
    disableOnInteraction:false
    }"
  loop
  >
    <swiper-slide v-for="(item,index) in list.value" :key="index">
        <img :src="item.pic" alt="">
    </swiper-slide>>
    <div class="swiper-button-prev swiper_btn"></div>
    <div class="swiper-button-next swiper_btn"></div>
  </swiper>
  
</template>
<script>
import { reactive} from 'vue'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/scss';
import 'swiper/scss/navigation';
// Import Swiper core and required modules
import SwiperCore, {
  Navigation,
  Pagination,
  A11y,
  Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, A11y, Autoplay]);
// 引入axios
import axios from 'axios'
  export default {
    components:{
      Swiper,
      SwiperSlide,
    },
    setup() {
        let list = reactive([])
        axios.get("http://127.0.0.1:4523/m1/1231339-0-default/myZcool/banner/888")
        .then((res)=>{
          list.value = res.data.data
        })
        .catch(()=>{
          console.log("not found")
        })
        return {
            list,
            modules: [Navigation, Pagination, A11y],
        };
    },
  };
</script>
<style lang="scss" scoped>
// banner样式
.swiper{
  width: 74%;
  height: 352px;
  border-radius: 5px;
  margin-top: 20px;
  img{
    width: 100%;
    height: 100%;
  }
  .swiper-button-prev:after, .swiper-button-next:after{
    font-size: 20px;
    color: white;
    line-height: 50px;
  }
  .swiper_btn{
    display: none;
    width: 50px;
    height: 50px;
    background-color: black;
    border-radius: 50%;
    opacity: 0.8;
  }
  .swiper_btn:hover {
    opacity: 0.5;
  }
}
.swiper:hover .swiper_btn{
  display: block;
}
</style>